<template>
  <div class="dashboard-container">
    <div class="app-container">
      <page-tools :show-before="true">
        <span slot="before">有{{ total }}条考勤审批尚未处理</span>
        <template slot="after">
          <el-button size="small" type="primary">导入</el-button>
          <el-button size="small" type="primary">提醒</el-button>
          <el-button size="small" type="primary">设置</el-button>
          <el-button size="small" type="primary">历史归档</el-button>
          <el-button size="small" type="primary">3月份报表</el-button>
        </template>
      </page-tools>

      <el-card class="box-card">
        <el-form>
          <!-- 部门 -->
          <el-form-item v-model="section" label="部门:">
            <el-checkbox
              v-for="item in section"
              :key="item"
              :label="item"
            />
          </el-form-item>
          <!-- 考情状态 -->
          <el-form-item label="考情状态:">
            <el-radio v-model="radio" label="1">正常</el-radio>
            <el-radio v-model="radio" label="2">矿工</el-radio>
            <el-radio v-model="radio" label="3">事假</el-radio>
            <el-radio v-model="radio" label="4">调休</el-radio>
            <el-radio v-model="radio" label="5">迟到</el-radio>
            <el-radio v-model="radio" label="6">早退</el-radio>
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 表格分页 -->
      <el-card class="HrTable">
        <el-table :data="attendancesList">
          <el-table-column
            type="index"
            label="序号"
          />
          <el-table-column
            prop="username"
            label="姓名"
          />
          <el-table-column
            prop="workNumber"
            label="工号"
          />
          <el-table-column
            width="150"
            prop="departmentName"
            label="部门"
          />
          <el-table-column
            width="120"
            prop="mobile"
            label="手机"
          />
          <el-table-column
            v-for="i in 31"
            :key="i"
            prop=""
            :label="'3/'+i"
          />
        </el-table>
        <el-pagination
          class="page"
          background
          :page-size="page.pageSize"
          layout="prev, pager, next"
          :total="total"
          @current-change="currentChange"
        />

      </el-card>

    </div>
  </div>
</template>

<script>
import { getAttendancesListMock } from '@/api/attendances'
export default {
  data() {
    return {
      attendancesList: [], // 数据列表
      radio: '1', // 工作状态单选框
      checked: false, // 部门多选框
      section: ['总裁办', '行政部', '人事部', '财务部', '技术部', '运营部', '市场部', '财务核算部', '税务管理部', '薪资管理部', 'Java研发部', 'Python研发部', 'Php研发部', '北京事业部', '上海事业部'],
      page: {
        page: 1, // 当前页码
        pageSize: 10 // 每页数量
      },
      total: 0
    }
  },
  async created() {
    const res = await getAttendancesListMock()
    // 数据列表
    this.attendancesList = res
    // 数据总数
    this.total = res.length

    console.log(res)
  },
  methods: {
    currentChange(currentPage) {
      this.page.page = currentPage
    }
  }
}
</script>

<style lang="scss" scoped>
  .section {
  font-weight: 700;
}

.HrTable{
  margin-top: 20px;
}
.page{
  margin-top: 20px;
  text-align: center;
}
</style>
